<template>
	<view>

		<view class="module ">
			<image :src="loginImages" mode=""></image>
		</view>
		<view class="logos flex_ZC">
			<!-- <image src="../../static/image/logo.png" mode=""></image> -->
			<text>多彩王朝</text>
			<view class="modular_box">
				<view class="binding flex_dq" style="margin-top: 15px;">
					<image src="../../static/icon/i_user.png" mode=""></image>
					<u-input type="text" placeholder="请输入您的账号"   placeholderStyle="color: #c0c4cc90" maxlength="32" @change="isInput1"  v-model.trim="account"></u-input>
				</view>
				<view class="binding flex_dq" style="margin-top: 15px;">
					<image src="../../static/icon/i_mm.png" mode=""></image>
					<u-input type="password" v-show="openPassword" placeholder="请输入登录密码"  placeholderStyle="color: #c0c4cc90" maxlength="32"  @change="isInput2" v-model.trim="password" @confirm="ruleValidation"></u-input>
					<u-input type="text" v-show="!openPassword" placeholder="请输入登录密码" maxlength="32"  @change="isInput2" v-model.trim="password" @confirm="ruleValidation"></u-input>
					<u-icon :name="openPassword? 'eye-off':'eye-fill'" color="#A6A5AF" size="20" @click="openPassword = !openPassword"></u-icon>
				</view>

				<view class="log_out flex_c" :class="satisfyStatus?'bgTaggle':''" @click="ruleValidation">
					<image class="highlights" v-if="satisfyStatus" src="../../static/image/mask.png" mode=""></image>
					<text>开始旅行</text>
				</view>
				<view class="forget flex_ld">
					<text @click="isRegister">立即注册</text>
					<!-- #ifdef H5 -->
					<!-- <text @click="download">下载APP</text> -->
					<!-- #endif -->
					<text @click="goforget">忘记密码?</text>
				</view>
			</view>
		</view>
		<!-- 协议 -->
		<view class="information entry">
			<view class="zhengce flex_c" @click="toggleAgree">
				<image src="../../static/icon/i_checkbox1.png" mode="" v-if="!selectStatus"></image>
				<image src="../../static/icon/i_checkbox.png" mode="" v-if="selectStatus"></image>
			</view>
			<view class="information_box flex_dq">
				<text>登录代表你已经同意</text>
				<text class="underline" @click.stop="showAgreements(1)">《用户协议》</text>
				<text>和</text>
				<text class="underline" @click.stop="showAgreements(2)">《隐私政策》</text>
			</view>
		</view>
		<view v-if="isyzm">
			<web-view :fullscreen="false"  src="/static/local.html" @message="callback2"></web-view>
		</view>

		<!-- 协议弹窗 -->
		<u-popup mode="center" :show="isShowAgreement" @close="isShowAgreement = false" zIndex="10076" bgColor="transparent">
			<view class="modal-content">
				<!-- <view class="title">《{{tit}}》</view> -->
				<scroll-view scroll-y>
					<view class="agreement-txt">
						<view class="rich-text-wrp">
							<rich-text style="opacity: 0.7;" :nodes="yhxy"></rich-text>
						</view>
					</view>
				</scroll-view>
				<view class="close_btn" @click="hideAgreement">
					<text>关闭</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" zIndex="10075" closeable bgColor="transparent" >
			<view class="prompt flex_ZC">
				<text class=" f36">多彩王朝服务声明</text>
				<view class="information_box martop flex_dq">
					<text>我已阅读并同意</text>
					<text class="underline" @click.stop="showAgreements(1)">《用户协议》</text>
					<text>和</text>
					<text class="underline" @click.stop="showAgreements(2)">《隐私政策》</text>
				</view>
				<view class="prompt_ntm" @click="userAgree" >
					<text>同意并继续</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		
		<u-popup :show="warningShow" mode="center" :overlayStyle='overlayStyle' bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="warning_txt">多彩王朝APP，因系统升级暂停访问，请通过福乐甄选或者网页进入！</text>
				<view class="prompt_ntm" @click="userConfrim">
					<text>确认</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {login,registerAgreement} from "../../api/login.js"
	import {agreementImages} from "../../api/other.js"
	export default {
		data() {
			return {
				tit:'',
				account: '', //账号
				password: '', //密码
				yhxy:'', //协议
				randstr:"",
				ticket:"",
				loginImages:'', //背景图
				isyzm:false, //验证码
				check1: false, //监听用户是否输入内容
				check2: false, //监听用户是否输入内容
				tipShow:false, //用户同意弹窗
				canClick: true,//防连点
				ruleState: false, //规则校验
				warningShow:false,//警告弹窗
				openPassword:true,//密码显示隐藏
				selectStatus: false, //选中状态
				satisfyStatus:false,//满足条件高亮
				isShowAgreement: false,// 协议弹窗 
				overlayStyle:{
					 backdropFilter:'blur(6px)',
				}
			}
		},
		onLoad() {
			this.isBackgroundS()
			uni.getSystemInfo({
				success: (res) => {
					console.log(11111111111,res);
					if (res.uniPlatform == "web") {
						this.sestype = "h5"
						console.log(this.sestype, )
					}
					if (res.uniPlatform == "app") {
						this.sestype = "app" 
						this.warningShow = true
						console.log(this.sestype)
					}
				}
			});
		},
		onShow() {
			let tokens = uni.getStorageSync('token')
			if(tokens){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
			let userDetail = uni.getStorageSync('userDetail') || ''
			if(userDetail){
				this.account = userDetail.account
				this.check1 = true
			}

		},
		methods: {
			callback2(res){
				let that=this
				that.isyzm=false
				let r = res.detail.data[0].res;
				if (r.ret === 0) {
					that.randstr=r.randstr
					that.ticket=r.ticket
					that.isComplete()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去
					
				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
			},
			userConfrim(){
				uni.$u.toast('多彩王朝APP，因系统升级暂停访问，请通过福乐甄选或者网页进入！');
				// plus.runtime.openURL('https://h5.fulezhenxuan.cn/')
			},
			callback(res) {
				// 用户操作验证码或者关闭刷新腾讯返回的内容 
				let that = this
				if (res.ret === 0) {
					that.randstr=res.randstr
					that.ticket=res.ticket
					that.isComplete()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去
					
				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
			},
			varify2(){
				// #ifdef APP
					if (uni.$u.test.isEmpty(this.account)) {
						uni.$u.toast('请输入您的手机号');
						
					}else{
						this.isyzm=true
					}
					
				// #endif
				// #ifdef H5
					if (uni.$u.test.isEmpty(this.account)) {
						uni.$u.toast('请输入您的手机号');
						
					}else{
						this.varify()
					}
					
				// #endif
			},
			varify() {
				let appid = '197018098'; // 腾讯云控制台中对应这个项目的 appid
				//生成一个滑块验证码对象
				let captcha = new TencentCaptcha(appid, this.callback);
				// 滑块显示
				captcha.show();
			
			},
			// 初始化藏品列表
			isBackgroundS() {
				let data = {page: 1,};
				agreementImages(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.loginImages = res.data.login_images
					}
				})
			},
			// 协议
			toggleAgree() {
				this.selectStatus = !this.selectStatus
				this.inspectSatisfy()
			},
			//弹出层
			showAgreements(id) {
				console.log(id);
				this.isShowAgreement = true;
				registerAgreement().then(res=>{
					console.log(res)
					if(id == 1){
						this.yhxy = res.data.yhxy
						this.tit = '用户协议'
					}else{
						this.yhxy = res.data.privacy_agreement
						this.tit = '隐私协议'
					}
				})
			},
			// 监听数据变化1
			isInput1(value){
				if (value) this.check1 = true;
				else this.check1 = false;
				this.inspectSatisfy()
			},
			// 监听数据变化2
			isInput2(value){
				if (value) this.check2 = true;
				else this.check2 = false;
				this.inspectSatisfy()
			},
			// 校验是否满足条件
			inspectSatisfy(){
				if(this.check1 && this.check2 && this.selectStatus){
					// console.log('满足');
					this.satisfyStatus = true
				}else{
					this.satisfyStatus = false
					// console.log('不满足');
				}
			},
			// 关闭弹窗
			hideAgreement() {
				this.isShowAgreement = false;
			},
			// 快捷登录 监听键盘确认事件
			isConfirm(){
				this.ruleValidation()
			},
			userAgree(){
				let that = this;
				that.selectStatus = true
				that.tipShow = false
				that.satisfyStatus = true
				setTimeout(function() {
					that.ruleValidation()
				}, 1000);
			},
			// 规则校验
			ruleValidation() {
				let that = this;
				let {
					account,
					password,
					selectStatus
				} = that;
				
				if (uni.$u.test.isEmpty(account)) {
					uni.$u.toast('请输入您的账号');
					return;
				}
				if (uni.$u.test.isEmpty(password)) {
					uni.$u.toast('请输入密码');
					return;
				}
				if (password.length < 6) {
					uni.$u.toast('请输入正确密码');
					return;
				}
				if (!selectStatus) {
					// uni.$u.toast('请勾选协议');
					this.tipShow = true
					return;
				}
				this.ruleState = true
				this.varify2()
			},
			
			// 完成
			isComplete() {
				  if (!this.canClick) {
				        return;
				   }
				// this.ruleValidation()
				if (!this.ruleState) return;
				let data = {
					phone: this.account,
					password: this.password,
					randstr:this.randstr,
					ticket:this.ticket
				}
				this.canClick = false;
				login(data).then(res => {
					
					if(res.code == 1){
						uni.setStorageSync('token', res.data.token)
						if(res.data.phone == ''){
							uni.reLaunch({
								url:'/pages/login/bindPhone?noPhpne=' + false
							})
						}else{
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
							}, 1500);
						}
					}else{
						this.ruleState = false
					}
					setTimeout(() => {
					        this.canClick = true;
					}, 1000); // 设定一个点击间隔，防止频繁点击
				})
			},
			// 忘记密码
			goforget() {
				uni.navigateTo({
					url: '/pages/login/forgetPwd'
				})
			},
			//去注册
			isRegister() {
				uni.navigateTo({
					url: '/pages/login/register'
				});
			},
			download() {
				uni.navigateTo({
					url: '/pages/login/download'
				});
			}
		},
	}
</script>
<style>
	page {
		background: #E0DDDA;
	}
</style>

<style scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.module {  
		width: 100%;
		/* #ifdef H5 */
			height: 700rpx;
		/* #endif */
		/* #ifdef APP */
			height: 45vh;
		/* #endif */
	}
	.module>image{
		width: 100%;
		height: 100%;
	}
	.logos>image{
		width: 180rpx;
		height: 180rpx;
		transform: translateY(-180rpx);
	}

	.logos>text {
		font-family: iconfont;
		font-size: 48rpx;
		color: #9e8562;
		margin-top: 120rpx;
		/* transform: translateY(-80rpx); */
	}


	.modular_box {
		width: 92%;
		position: relative;
	}

	.active {
		color: #1E4BD8 !important;
	}

	.binding {
		width: 90%;
		margin: 10rpx auto;
		padding: 18rpx 0;
		border-bottom: 1rpx solid #A68A6450;
	}

	.binding>image {
		width: 34rpx;
		height: 34rpx;
		margin-left: 32rpx;
	}

	.martop {
		margin-top: 50rpx;
	}

	.log_out {
		position: relative;
		width: 92%;
		margin: 50rpx auto 0;
	}

	.log_out>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #ab9880 , #d7c4aa );
		color: #ffffff90;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.bgTaggle>text {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
		color: #ffffff !important;
		background: linear-gradient(274deg, #AB8E68, #D7BA93) !important;
	}

	.forget {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 92%;
		margin: 10rpx auto;
	}

	.forget>text {
		color: #666666;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.information {
		width: 80%;
		margin: 150rpx auto 0;
		display: flex;
		align-items: center;
		visibility: inherit;
	}

	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 10rpx;
	}

	.information_box>text {
		color: #999999;
		font-size: 24rpx;
	}

	.information_box>text:nth-child(2n) {
		color: #A68A64 !important;
	}

	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
	}
	.modal-content {
		width: 600rpx;
		height: 720rpx;
		background-color: #E0DDDA;
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.modal-content scroll-view {
		max-height: 560rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.modal-content .title {
		font-weight: bold;
		text-align: center;
		line-height: 2;
		font-size: 32rpx;
		padding: 20rpx 20rpx 0;
		color: #ffffff;
	}

	.agreement-txt {
		width: 92%;
		margin: 0 auto;
		padding: 20rpx 10rpx;
		min-height: 650rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #000000;
	}

	.close_btn {
		width: 92%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 28rpx;
		margin: 30rpx auto 0;
		background: linear-gradient(274deg, #AB8E68, #D7BA93) ;
		color: #ffffff;
		border-radius: 40rpx;
		text-align: center;
	}
	
	.prompt{
		width: 600rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
	}
	.prompt>text{
		color: #A68A64;
		margin-top: 40rpx;
	}
	.prompt_tit{
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #A6A5AF;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2; 
		overflow:hidden; 
	}
	.prompt_ntm{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93) ;
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}
	.warning_txt{
		padding: 0 32rpx;
		text-align: center;
	}
	.uni-input-placeholder{
		color: #999999 !important;
	}

	/deep/.u-input--square {
		border: none !important;
		padding: 4rpx 20rpx !important;
	}
	/deep/.uni-input-input{
		/* color: #d1d1d1 !important; */
	}
</style>